
/*My Paging*/
function pagingAtClient(button, pNumber, option){
	//construction: ul(parent[content:numberOfPage, currentPage])-li(parent[content: type, class=active])-a(this)
	
	//get ul (parent)
	var parent = $(button).parent().parent();

	//get numberOfPage
	var numberOfPage = parseInt($(parent).attr('numberOfPage'));
	
	//get numberPerPage
	var numberPerPage = parseInt($(parent).attr('numberPerPage'));
	
	//get currentPage
	var currentPage = parseInt($(parent).attr('currentPage'));
	
	//get pagingID
	var pagingID = $(parent).attr('id');
	
	// when this pageNumber is specific
	if ($.isNumeric(pNumber)){
		
		var pageNumber = parseInt(pNumber);
		
		//get table by tableID
		var tableID = $(parent).attr('tableID');
		var table = $('#'+tableID);
		
		//process will run only when pageNumber != currentPage
		if (pageNumber != currentPage){
			//remove showing rows
			$('#'+tableID+' div').find('.showOn').removeClass('showOn');
			
			//show approriate rows
			if (pageNumber > currentPage){// ---------------------------increasing number

				/*Find the rows and show them on (if existed) or load from server (if not have yet)*/
				// find number of tr in this table
				var numberOfRows = $('#'+tableID+' >div >div').length; 
				var hasPageAttribute = false;
				
				for (var i =0; i<numberOfRows; i++){
					
				}
				
				// the row for this pageNumber has been existed
				// from = (position want to be - 1) * numberPerPage
				var fromRowNumber = (pageNumber - 1)* numberPerPage;
				// to = (position want to be * numberPerPage) - 1 (the index begin at 0)
				var toRowNumber = (pageNumber * numberPerPage) -1;
				
				// show row at index form-to
				for (var i = fromRowNumber;  i<=toRowNumber ; i++){
					if (i == fromRowNumber){
						$('#'+tableID+' >div >div').eq(i).attr("page",pageNumber);
					}
					$('#'+tableID+' >div >div').eq(i).addClass('showOn');
				}
				
				//display paging button
				if	(pageNumber > 3 ) { 
					if (pageNumber % 2 == 0){ // ------------------------------------------------so chan
						if (pageNumber != numberOfPage){ // khac trang cuoi cung
							if (pageNumber == numberOfPage-1){// la trang ke' cuoi cung
								$('#'+pagingID+' a[href = \"#1\"]').html(pageNumber-3);
								$('#'+pagingID+' a[href = \"#2\"]').html(pageNumber-2);								
								$('#'+pagingID+' a[href = \"#3\"]').html(pageNumber-1);
								$('#'+pagingID+' a[href = \"#4\"]').html(pageNumber);
								$('#'+pagingID+' a[href = \"#5\"]').html(pageNumber+1);
								//$('.pagination a[href = "#2"]').html(pageNumber-2);
								
								// remove actived button
								var activedItem = $(parent).find(".active");
								activedItem.removeClass('active');
								// active button (number4)
								$('#'+pagingID+' a[href = \"#4\"]').parent().addClass('active');
								
								// change page number onClick event for each button
								$('#'+pagingID+' a[href = \"#1\"]').attr("onclick","pagingAtClient(this,'"+(pageNumber-3)+"')");
								$('#'+pagingID+' a[href = \"#2\"]').attr("onclick","pagingAtClient(this,'"+(pageNumber-2)+"')");
								$('#'+pagingID+' a[href = \"#3\"]').attr("onclick","pagingAtClient(this,'"+(pageNumber-1)+"')");
								$('#'+pagingID+' a[href = \"#4\"]').attr("onclick","pagingAtClient(this,'"+(pageNumber)+"')");
								$('#'+pagingID+' a[href = \"#5\"]').attr("onclick","pagingAtClient(this,'"+(pageNumber+1)+"')");
								
							} else { // la trang xa hon trang ke' cuoi
								$('#'+pagingID+' a[href = \"#1\"]').html(parseInt(pageNumber)-2);
								$('#'+pagingID+' a[href = \"#2\"]').html(parseInt(pageNumber)-1);
								$('#'+pagingID+' a[href = \"#3\"]').html(pageNumber);
								$('#'+pagingID+' a[href = \"#4\"]').html(parseInt(pageNumber)+1);
								$('#'+pagingID+' a[href = \"#5\"]').html(parseInt(pageNumber)+2);
								
								
								// remove actived button
								var activedItem = $(parent).find(".active");
								activedItem.removeClass('active');
								// active button at the middle (number3)
								$('#'+pagingID+' a[href = "#3"]').parent().addClass('active');
								
								// change page number onClick event for each button
								$('#'+pagingID+' a[href = "#1"]').attr("onclick","pagingAtClient(this,'"+(parseInt(pageNumber)-2)+"')");
								$('#'+pagingID+' a[href = "#2"]').attr("onclick","pagingAtClient(this,'"+(parseInt(pageNumber)-1)+"')");
								$('#'+pagingID+' a[href = "#3"]').attr("onclick","pagingAtClient(this,'"+(parseInt(pageNumber))+"')");
								$('#'+pagingID+' a[href = "#4"]').attr("onclick","pagingAtClient(this,'"+(parseInt(pageNumber)+1)+"')");
								$('#'+pagingID+' a[href = "#5"]').attr("onclick","pagingAtClient(this,'"+(parseInt(pageNumber)+2)+"')");
							} 						
							
						} else { // la trang cuoi cung
							// remove actived button
							var activedItem = $(parent).find(".active");
							activedItem.removeClass('active');
							
							if (numberOfPage > 5){
								for (var i = 0; i<5; i++){
									$('#'+pagingID+' a[href = "#1"]').html(numberOfPage-4);
									$('#'+pagingID+' a[href = "#2"]').html(numberOfPage-3);
									$('#'+pagingID+' a[href = "#3"]').html(numberOfPage-2);
									$('#'+pagingID+' a[href = "#4"]').html(numberOfPage-1);
									$('#'+pagingID+' a[href = "#5"]').html(numberOfPage);
									
									// active button at the middle (number5)
									$('#'+pagingID+' a[href = "#5"]').parent().addClass('active');
									
									// change page number onClick event for each button
									$('#'+pagingID+' a[href = "#1"]').attr("onclick","pagingAtClient(this,'"+(numberOfPage-4)+"')");
									$('#'+pagingID+' a[href = "#2"]').attr("onclick","pagingAtClient(this,'"+(numberOfPage-3)+"')");
									$('#'+pagingID+' a[href = "#3"]').attr("onclick","pagingAtClient(this,'"+(numberOfPage-2)+"')");
									$('#'+pagingID+' a[href = "#4"]').attr("onclick","pagingAtClient(this,'"+(numberOfPage-1)+"')");
									$('#'+pagingID+' a[href = "#5"]').attr("onclick","pagingAtClient(this,'"+(numberOfPage)+"')");
								}
								
							} else {
								for (var i = 0; i < numberOfPage; i++){
									$('#'+pagingID+' a[href = "#'+(i+1)+'"]').html(i+1);
									if((i+1) == pageNumber){
										$('#'+pagingID+' a[href = "#'+(i+1)+'"]').parent().addClass('active');
									}
									
									// change page number onClick event for each button
									$('#'+pagingID+' a[href = "#'+(i+1)+'"]').attr("onclick","pagingAtClient(this,'"+(i+1)+"')");
								}
							}
								
							
						}
						
					
					} else  { // -------------------------------------------------------------la so le
						if (pageNumber != numberOfPage){ // khac trang cuoi cung
							if (pageNumber == numberOfPage-1){// la trang ke' cuoi cung
								$('#'+pagingID+' a[href = "#1"]').html(pageNumber-3);
								$('#'+pagingID+' a[href = "#2"]').html(pageNumber-2);
								$('#'+pagingID+' a[href = "#3"]').html(pageNumber-1);
								$('#'+pagingID+' a[href = "#4"]').html(pageNumber);
								$('#'+pagingID+' a[href = "#5"]').html(pageNumber+1);
								
								
								// remove actived button
								var activedItem = $(parent).find(".active");
								activedItem.removeClass('active');
								// active button (number4)
								$('#'+pagingID+' a[href = "#4"]').parent().addClass('active');
								
								// change page number onClick event for each button
								$('#'+pagingID+' a[href = "#1"]').attr("onclick","pagingAtClient(this,'"+(pageNumber-3)+"')");
								$('#'+pagingID+' a[href = "#2"]').attr("onclick","pagingAtClient(this,'"+(pageNumber-2)+"')");
								$('#'+pagingID+' a[href = "#3"]').attr("onclick","pagingAtClient(this,'"+(pageNumber-1)+"')");
								$('#'+pagingID+' a[href = "#4"]').attr("onclick","pagingAtClient(this,'"+(pageNumber)+"')");
								$('#'+pagingID+' a[href = "#5"]').attr("onclick","pagingAtClient(this,'"+(pageNumber+1)+"')");
							
							} else { // la trang xa hon trang ke' cuoi
								
								$('#'+pagingID+' a[href = "#1"]').html(parseInt(pageNumber)-2);
								$('#'+pagingID+' a[href = "#2"]').html(parseInt(pageNumber)-1);
								$('#'+pagingID+' a[href = "#3"]').html(pageNumber);
								$('#'+pagingID+' a[href = "#4"]').html(parseInt(pageNumber)+1);
								$('#'+pagingID+' a[href = "#5"]').html(parseInt(pageNumber)+2);
								
								
								// remove actived button
								var activedItem = $(parent).find(".active");
								activedItem.removeClass('active');
								// active button at the middle (number3)
								$('#'+pagingID+' a[href = "#3"]').parent().addClass('active');
								
								// change page number onClick event for each button
								$('#'+pagingID+' a[href = "#1"]').attr("onclick","pagingAtClient(this,'"+(parseInt(pageNumber)-2)+"')");
								$('#'+pagingID+' a[href = "#2"]').attr("onclick","pagingAtClient(this,'"+(parseInt(pageNumber)-1)+"')");
								$('#'+pagingID+' a[href = "#3"]').attr("onclick","pagingAtClient(this,'"+(parseInt(pageNumber))+"')");
								$('#'+pagingID+' a[href = "#4"]').attr("onclick","pagingAtClient(this,'"+(parseInt(pageNumber)+1)+"')");
								$('#'+pagingID+' a[href = "#5"]').attr("onclick","pagingAtClient(this,'"+(parseInt(pageNumber)+2)+"')");
							} 
						}
						else { // la trang cuoi
							
								$('#'+pagingID+' a[href = "#1"]').html(numberOfPage-4);
								$('#'+pagingID+' a[href = "#2"]').html(numberOfPage-3);
								$('#'+pagingID+' a[href = "#3"]').html(numberOfPage-2);
								$('#'+pagingID+' a[href = "#4"]').html(numberOfPage-1);
								$('#'+pagingID+' a[href = "#5"]').html(numberOfPage);
								
								
								// remove actived button
								var activedItem = $(parent).find(".active");
								activedItem.removeClass('active');
								// active button at the middle (number5)
								$('#'+pagingID+' a[href = "#5"]').parent().addClass('active');
								
								// change page number onClick event for each button
								$('#'+pagingID+' a[href = "#1"]').attr("onclick","pagingAtClient(this,'"+(numberOfPage-4)+"')");
								$('#'+pagingID+' a[href = "#2"]').attr("onclick","pagingAtClient(this,'"+(numberOfPage-3)+"')");
								$('#'+pagingID+' a[href = "#3"]').attr("onclick","pagingAtClient(this,'"+(numberOfPage-2)+"')");
								$('#'+pagingID+' a[href = "#4"]').attr("onclick","pagingAtClient(this,'"+(numberOfPage-1)+"')");
								$('#'+pagingID+' a[href = "#5"]').attr("onclick","pagingAtClient(this,'"+(numberOfPage)+"')");
						}
					}
				} else {// la so be hon 3
				
					// remove actived button
					var activedItem = $(parent).find(".active");
					activedItem.removeClass('active');
					
					// active clicked button
					$(button).parent().addClass('active');
				}
				
			} else if (pageNumber < currentPage){		// ----------------------------decreasing number
				var toRowNumber = (pageNumber * numberPerPage) - 1;
				var fromRowNumber = toRowNumber - numberPerPage + 1;
				
				for (var i = fromRowNumber;  i<=toRowNumber ; i++){
					if (i == fromRowNumber){
						$('#'+tableID+' >div >div').eq(i).attr("page",pageNumber);
					}
					$('#'+tableID+' >div >div').eq(i).addClass('showOn');
				}
				
				//display paging button
				if	(pageNumber >= 3 ) { 
					if (pageNumber % 2 != 0){ // ---------------------------------------- so le
					
						if (pageNumber == numberOfPage-1){// la ke' cuoi cung 
							// remove actived button
							var activedItem = $(parent).find(".active");
							activedItem.removeClass('active');
							
							// active clicked button
							$(button).parent().addClass('active');
							
						} else { // khac trang ke cuoi
							$('#'+pagingID+' a[href = "#1"]').html(parseInt(pageNumber)-2);
							$('#'+pagingID+' a[href = "#2"]').html(parseInt(pageNumber)-1);
							$('#'+pagingID+' a[href = "#3"]').html(pageNumber);
							$('#'+pagingID+' a[href = "#4"]').html(parseInt(pageNumber)+1);
							$('#'+pagingID+' a[href = "#5"]').html(parseInt(pageNumber)+2);
							
							
							// remove actived button
							var activedItem = $(parent).find(".active");
							activedItem.removeClass('active');
							// active button at the middle (number3)
							$('#'+pagingID+' a[href = "#3"]').parent().addClass('active');
							
							// change page number onClick event for each button
							$('#'+pagingID+' a[href = "#1"]').attr("onclick","pagingAtClient(this,'"+(parseInt(pageNumber)-2)+"')");
							$('#'+pagingID+' a[href = "#2"]').attr("onclick","pagingAtClient(this,'"+(parseInt(pageNumber)-1)+"')");
							$('#'+pagingID+' a[href = "#3"]').attr("onclick","pagingAtClient(this,'"+(parseInt(pageNumber))+"')");
							$('#'+pagingID+' a[href = "#4"]').attr("onclick","pagingAtClient(this,'"+(parseInt(pageNumber)+1)+"')");
							$('#'+pagingID+' a[href = "#5"]').attr("onclick","pagingAtClient(this,'"+(parseInt(pageNumber)+2)+"')");
							
						} 
					
					} else  { // ---------------------------------------------------------la so chan
						if (pageNumber == numberOfPage-1){// la trang ke' cuoi cung
								$('#'+pagingID+' a[href = "#1"]').html(pageNumber-3);
								$('#'+pagingID+' a[href = "#2"]').html(pageNumber-2);
								$('#'+pagingID+' a[href = "#3"]').html(pageNumber-1);
								$('#'+pagingID+' a[href = "#4"]').html(pageNumber);
								$('#'+pagingID+' a[href = "#5"]').html(pageNumber+1);
								
								
								// remove actived button
								var activedItem = $(parent).find(".active");
								activedItem.removeClass('active');
								// active button (number4)
								$('#'+pagingID+' a[href = "#4"]').parent().addClass('active');
								
								// change page number onClick event for each button
								$('#'+pagingID+' a[href = "#1"]').attr("onclick","pagingAtClient(this,'"+(pageNumber-3)+"')");
								$('#'+pagingID+' a[href = "#2"]').attr("onclick","pagingAtClient(this,'"+(pageNumber-2)+"')");
								$('#'+pagingID+' a[href = "#3"]').attr("onclick","pagingAtClient(this,'"+(pageNumber-1)+"')");
								$('#'+pagingID+' a[href = "#4"]').attr("onclick","pagingAtClient(this,'"+(pageNumber)+"')");
								$('#'+pagingID+' a[href = "#5"]').attr("onclick","pagingAtClient(this,'"+(pageNumber+1)+"')");
							
							} else { // la trang xa hon trang ke cuoi
								$('#'+pagingID+' a[href = "#1"]').html(parseInt(pageNumber)-2);
								$('#'+pagingID+' a[href = "#2"]').html(parseInt(pageNumber)-1);
								$('#'+pagingID+' a[href = "#3"]').html(pageNumber);
								$('#'+pagingID+' a[href = "#4"]').html(parseInt(pageNumber)+1);
								$('#'+pagingID+' a[href = "#5"]').html(parseInt(pageNumber)+2);
								
								
								// remove actived button
								var activedItem = $(parent).find(".active");
								activedItem.removeClass('active');
								// active button at the middle (number3)
								$('#'+pagingID+' a[href = "#3"]').parent().addClass('active');
								
								// change page number onClick event for each button
								$('#'+pagingID+' a[href = "#1"]').attr("onclick","pagingAtClient(this,'"+(parseInt(pageNumber)-2)+"')");
								$('#'+pagingID+' a[href = "#2"]').attr("onclick","pagingAtClient(this,'"+(parseInt(pageNumber)-1)+"')");
								$('#'+pagingID+' a[href = "#3"]').attr("onclick","pagingAtClient(this,'"+(parseInt(pageNumber))+"')");
								$('#'+pagingID+' a[href = "#4"]').attr("onclick","pagingAtClient(this,'"+(parseInt(pageNumber)+1)+"')");
								$('#'+pagingID+' a[href = "#5"]').attr("onclick","pagingAtClient(this,'"+(parseInt(pageNumber)+2)+"')");
							}
					}
				} else {// la so be hon 3
				
					// remove actived button
					var activedItem = $(parent).find(".active");
					activedItem.removeClass('active');
					
					if (numberOfPage > 5){
						for (var i = 0; i<5; i++){
							$('#'+pagingID+' a[href = "#'+(i+1)+'"]').html(i+1);
							if((i+1) == pageNumber){
								// active button (number2)
								$('#'+pagingID+' a[href = "#'+(i+1)+'"]').parent().addClass('active');								
							}
							// change page number onClick event for each button
							$('#'+pagingID+' a[href = "#'+(i+1)+'"]').attr("onclick","pagingAtClient(this,'"+(i+1)+"')");
						}
						
					} else {
						for (var i = 0; i < numberOfPage; i++){
							$('#'+pagingID+' a[href = "#'+(i+1)+'"]').html(i+1);
							if((i+1) == pageNumber){
								// active button (number2)
								$('#'+pagingID+' a[href = "#'+(i+1)+'"]').parent().addClass('active');
							}
							
							// change page number onClick event for each button
							$('#'+pagingID+' a[href = "#'+(i+1)+'"]').attr("onclick","pagingAtClient(this,'"+(i+1)+"')");
						}
					}
				}
			}
			
			//set currentPage again
			$(parent).attr('currentPage',pageNumber);
			
		
		}
		
	} else { // using for: next, prev, last, first
		switch(pNumber){
			case 'next':
				
				if((currentPage+ 1) <= 5 ){
					var newButton = $('#'+pagingID+' a[href = "#'+(currentPage+ 1)+'"]');
					pagingAtClient(newButton, (currentPage+ 1));
				} else {
					if((currentPage+ 1) < (numberOfPage-1)){
						var newButton = $('#'+pagingID+' a[href = "#3"]');
						pagingAtClient(newButton, (currentPage+ 1));
					} else if ((currentPage+ 1) == (numberOfPage-1)){
						var newButton = $('#'+pagingID+' a[href = "#4"]');
						pagingAtClient(newButton, (currentPage+ 1));
					} else if ((currentPage+ 1) == (numberOfPage)){
						var newButton = $('#'+pagingID+' a[href = "#5"]');
						pagingAtClient(newButton, (currentPage+ 1));
					} else{
						var newButton = $('#'+pagingID+' a[href = "#'+(currentPage+ 1)+'"]');
						pagingAtClient(newButton, (currentPage+ 1));
					}
				}
				
				break;
			case 'prev':
				
				if((currentPage- 1) < 5 ){
					var newButton = $('#'+pagingID+' a[href = "#'+(currentPage-1)+'"]');
					pagingAtClient(newButton, (currentPage- 1));
				} else {
					if((currentPage- 1) < (numberOfPage-1)){
						var newButton = $('#'+pagingID+' a[href = "#3"]');
						pagingAtClient(newButton, (currentPage- 1));
					} else if ((currentPage- 1) == (numberOfPage-1)){
						var newButton = $('#'+pagingID+' a[href = "#4"]');
						pagingAtClient(newButton, (currentPage- 1));
					} else if ((currentPage- 1) == (numberOfPage)){
						var newButton = $('#'+pagingID+' a[href = "#5"]');
						pagingAtClient(newButton, (currentPage- 1));
					} else{
						var newButton = $('#'+pagingID+' a[href = "#'+(currentPage- 1)+'"]');
						pagingAtClient(newButton, (currentPage- 1));
					}
				}
				break;
			case 'last':
				if(numberOfPage > 5){
					var newButton = $('#'+pagingID+' a[href = "#5"]');
					pagingAtClient(newButton, numberOfPage);
				} else {
				
					var newButton = $('#'+pagingID+' a[href = "#'+numberOfPage+'"]');
					pagingAtClient(newButton, numberOfPage);
				}
				
				break;
				
			case 'first':
				
				var newButton = $('#'+pagingID+' a[href = "#1"]');
				pagingAtClient(newButton, '1');
				break;
			default:
				break;
		}
	}
	
}

// phat sinh button click
function createButton (setting){

	//var numberOfPage = setting.numberOfPage;
	//var numberPerPage = setting.numberPerPage;
	var hasFirst = setting.hasFirst =="true"?true:false;
	var hasLast = setting.hasLast =="true"?true:false;
	var hasPrev = setting.hasPrev =="true"?true:false;
	var hasNext = setting.hasNext =="true"?true:false;
	var tableMapping = setting.tableMapping;
	
	//mapping paging button to table
	var numberOfTable = tableMapping.length;
	for (var j = 0; j<numberOfTable; j++){
		var numberOfPage = tableMapping[j].numberOfPage;
		var numberPerPage = tableMapping[j].numberPerPage;
		var pagingID = tableMapping[j].pagingID;
		var tableID = tableMapping[j].tableID;
		$('#'+pagingID).attr('tableID',tableID);
		$('#'+pagingID).attr('numberPerPage',tableMapping[j].numberPerPage);
		$('#'+pagingID).attr('numberOfPage',tableMapping[j].numberOfPage);
		$('#'+pagingID).attr('currentPage','1');
		
		// thiet lap cac row dc show lan dau
		for (var r = 0;  r<numberPerPage ; r++){
			$('#'+tableID+' >div >div').eq(r).addClass('showOn');
		}
		
		// thiet lap button
		var contentButton = "";
		if (hasFirst){
				contentButton += "<li><a href=\"#First\" onclick=\"pagingAtClient(this,\'first\')\">Đầu</a></li>";
		}
		
		if (hasPrev){
			contentButton += "<li><a href=\"#Prev\" onclick=\"pagingAtClient(this,'prev')\">Lùi</a></li>";
		}
		
		if (numberOfPage > 5){		
			
			for(var i = 0; i< 5;i++){
				if(i==0){
					contentButton += "<li class=\"active\"><a href=\"#"+(i+1)+"\" onclick=\"pagingAtClient(this,'"+(i+1)+"')\">"+(i+1)+"</a></li>";
				} else {
					contentButton += "<li><a href=\"#"+(i+1)+"\" onclick=\"pagingAtClient(this,'"+(i+1)+"')\">"+(i+1)+"</a></li>";
				}
			}
				
					
		}  else {
		
			for(var i = 0; i< numberOfPage;i++){
				if(i==0){
					contentButton += "<li class=\"active\"><a href=\"#"+(i+1)+"\" onclick=\"pagingAtClient(this,'"+(i+1)+"')\">"+(i+1)+"</a></li>";
				} else {
					contentButton += "<li><a href=\"#"+(i+1)+"\" onclick=\"pagingAtClient(this,'"+(i+1)+"')\">"+(i+1)+"</a></li>";
				}
			}	
		}
		
		
		if (hasNext){
			contentButton += "<li><a href=\"#Next\" onclick=\"pagingAtClient(this,'next')\">Tới</a></li>";
		}
		
		if (hasLast){
			contentButton += "<li><a href=\"#Last\" onclick=\"pagingAtClient(this,'last')\">Cuối</a></li>";
		}
		
		$('#'+pagingID).html(contentButton);
	}

}







